<template>
  <div>
    <el-main>
     
    </el-main>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
         activeName: 'second',
                //总记录数
                totalCount: 100,
                currentPage: 1,
                pageSize: 10,
                //表格中数据
                tableData: [],
    };
  },
  mounted() {
    //发送异步请求,获取数据

    this.selectAll();
  },
  methods: {
         /*显示数据*/
            selectAll() {
                var _this = this;
                axios({
                    method: "post",
                    //url:"http://localhost:8080/dome1/elServlet?method=selectAll"
                    url: "http://localhost:8080/demo4/book/selectAllExplain?currentPage=" + _this.currentPage + "&pageSize=" + _this.pageSize,
                }).then(function (resp) {
                    _this.tableData = resp.data.rows;
                    _this.totalCount = resp.data.totalCount;
                })
            },

            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            },

            //变色表格
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                } else if (rowIndex === 5) {
                    return 'warning-row';
                } else if (rowIndex === 7) {
                    return 'success-row';
                } else if (rowIndex === 9) {
                    return 'warning-row';
                }
                return '';
            },
            myChart() {
                var chart = echarts.init(document.getElementById('chart'));

                // 发起异步请求获取数据
                axios.post('http://localhost:8080/demo4/servlet?method=find')
                    .then(function (response) {
                        var data_biao = [];
                        var x_axis = [];
                        var data = response.data;
                        for (var i = 0; i < data.length; i++) {
                            x_axis.push(data[i].HotWords);
                            data_biao.push(data[i].Num);
                        }
                        // 获取数据后进行图表的配置和呈现
                        var option = {
                            title: {
                                text: '柱状图展示'
                            },
                            xAxis: {
                                data: x_axis,
                                axisLabel: {
                                    interval: 0, // 设置刻度标签全部显示，不自动隐藏
                                    rotate: 90  // 设置刻度标签字体旋转角度为 90 度
                                },
                            },
                            yAxis: {},
                            series: [{
                                name: '数据',
                                type: 'bar',
                                data: data_biao
                            }]
                        };
                        chart.setOption(option);
                    })
                    .catch(function (error) {
                        console.log('发生错误：', error);
                    });
            },
            cloud() {
                // 获取图表容器
                var chartContainer = document.getElementById('chart-container');
                // 基于图表容器创建一个 ECharts 实例
                var chart = echarts.init(chartContainer);
                var myChart = echarts.init(document.getElementById('main'));
                var statisticsData = [];
                myChart.showLoading();
                $.ajax({
                    type: "post",
                    async: true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
                    url: "http://localhost:8080/demo4/servlet?method=find", //请求发送到Servlet
                    data: {},
                    dataType: "json", //返回数据形式为json
                    //7.请求成功后接收数据name+num两组数据
                    success: function (result) {
                        //result为服务器返回的json对象
                        if (result) {
                            //8.取出数据存入数组
                            for (var i = 0; i < result.length; i++) {
                                var statisticsObj = {name: '', value: ''};   //因为ECharts里边需要的的数据格式是这样的
                                statisticsObj.name = result[i].HotWords;
                                statisticsObj.value = result[i].Num;
                                //alert( statisticsObj.name);
                                //alert(statisticsObj.value);
                                statisticsData.push(statisticsObj);
                            }
                            //alert(statisticsData);
                            //把拿到的异步数据push进我自己建的数组里
                            myChart.hideLoading();
                            //9.覆盖操作-根据数据加载数据图表
                            var z1_option = {
                                title: {
                                    text: '热词图'
                                },
                                series: [{
                                    type: 'wordCloud',
                                    gridSize: 30,
                                    sizeRange: [80, 100],
                                    rotationRange: [-90, 90],
                                    shape: 'pentagon',
                                    left: 'center',
                                    top: 'center',
                                    right: null,
                                    bottom: null,
                                    width: '100%',
                                    height: '100%',
                                    textStyle: {
                                        normal: {
                                            color: function () {
                                                return 'rgb(' + [
                                                    Math.round(Math.random() * 160),
                                                    Math.round(Math.random() * 160),
                                                    Math.round(Math.random() * 160)
                                                ].join(',') + ')';
                                            }
                                        },
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowColor: '#333'
                                        }
                                    },
                                    data: statisticsData
                                }]
                            };
                            // 定义图表配置项和数据
                            var options = {
                                title: {
                                    text: '饼状图',
                                    left: 'center'
                                },
                                series: [
                                    {
                                        name: '热词',
                                        type: 'pie',
                                        radius: '50%',
                                        data: statisticsData
                                    }
                                ]
                            };

                            // 使用配置项和数据生成图表
                            chart.setOption(options);
                            myChart.setOption(z1_option, true);
                        }
                    },
                })
            }
  },
};
</script>

<style>
</style>